<!DOCTYPE html><html lang="zh-CN"><head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>九九乘法表</title>
   <style>
       body {
           display: flex;
           justify-content: center;
           align-items: center;
           min-height: 100vh;
           margin: 0;
       }

       .multiplication-table {
           border-collapse: collapse;
       }

       .multiplication-table td {
           border: 1px solid #000;
           padding: 10px 15px;
           text-align: center;
           font-size: 16px;
           transition: all 0.3s ease; /* 平滑过渡效果 */
       }

       /* 鼠标悬停样式 */
       .multiplication-table td:hover {
           background-color: #0066cc;
           color: white;
           transform: scale(1.1); /* 轻微放大效果 */
       }
   </style></head><body>
   <table class="multiplication-table" id="tableContainer"></table>

   <script>
       const table = document.getElementById('tableContainer');

       // 生成九九乘法表
       for (let i = 1; i <= 9; i++) {
           const row = document.createElement('tr'); // 创建行

           for (let j = 1; j <= i; j++) {
               const cell = document.createElement('td'); // 创建单元格
               const result = i * j;
               cell.textContent = `${i}×${j}=${result}`;
               row.appendChild(cell);
           }

           table.appendChild(row);
       }
   </script>

</body>

</html>

